import React from "react";
import { useHistory } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { creditsService, UserCredits } from "../services/credits";
import { useState, useEffect } from "react";

const UserDropdown: React.FC = () => {
  const [userCredits, setUserCredits] = useState<UserCredits | null>(null);
  const { user, logout } = useAuth();
  const history = useHistory();

  useEffect(() => {
    const loadUserCredits = async () => {
      if (user) {
        try {
          const credits = await creditsService.getUserCredits(user.id);
          setUserCredits(credits);
        } catch (error) {
          console.error("Failed to load credits:", error);
          setUserCredits(null);
        }
      }
    };

    loadUserCredits();
  }, [user]);

  const handleLogout = async () => {
    try {
      await logout();
      history.push("/");
    } catch (error) {
      console.error("登出失败:", error);
      history.push("/");
    }
  };

  const getUserDisplayName = () => {
    if (user?.firstName && user?.lastName) {
      return `${user.firstName} ${user.lastName}`;
    }
    if (user?.firstName) {
      return user.firstName;
    }
    if (user?.email) {
      return user.email.split("@")[0];
    }
    return "User";
  };

  const getUserAvatarLetter = () => {
    const displayName = getUserDisplayName();
    return displayName.charAt(0).toUpperCase();
  };

  return (
    <div className="w-80 bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden z-[999]">
      {/* 用户信息头部 */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6">
        <div className="flex items-center space-x-4">
          {user?.picture ? (
            <img
              src={user.picture}
              alt="User Avatar"
              className="w-12 h-12 rounded-full object-cover border-2 border-white/20"
            />
          ) : (
            <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center text-white text-xl font-bold border-2 border-white/20">
              {getUserAvatarLetter()}
            </div>
          )}
          <div className="flex-1 min-w-0">
            <h3 className="text-lg font-semibold text-white truncate">
              {getUserDisplayName()}
            </h3>
            <p className="text-sm text-blue-100 truncate">{user?.email}</p>
          </div>
        </div>
      </div>

      {/* 积分信息 */}
      <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
        <div className="flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
            <span className="text-sm font-medium text-gray-600">Points balance</span>
          </div>
          <div className="flex items-center space-x-1">
            <span className="text-xl font-bold text-gray-900">
              {userCredits ? userCredits.creditBalance : "..."}
            </span>
            <span className="text-sm text-gray-500">credits</span>
          </div>
        </div>
      </div>

      {/* 菜单选项 */}
      <div className="py-2">
        <button
          onClick={() => history.push("/profile-info")}
          className="w-full px-6 py-3 text-left text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 flex items-center group"
        >
          <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-blue-200 transition-colors">
            <svg
              className="w-5 h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
              />
            </svg>
          </div>
          <span className="font-medium">Personal Center</span>
        </button>

        <button
          onClick={() => history.push('/design')}
          className="w-full px-6 py-3 text-left text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition-all duration-200 flex items-center group"
        >
          <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-purple-200 transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
          </div>
          <span className="font-medium">Create Design</span>
        </button>
        
        {/* <button
          onClick={() => history.push('/profile-text-to-image')}
          className="w-full px-6 py-3 text-left text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-all duration-200 flex items-center group"
        >
          <div className="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-indigo-200 transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </div>
          <span className="font-medium">Text Design</span>
        </button> */}
        
        <button
          onClick={() => history.push('/design-gallery')}
          className="w-full px-6 py-3 text-left text-gray-700 hover:bg-green-50 hover:text-green-700 transition-all duration-200 flex items-center group"
        >
          <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-green-200 transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </div>
          <span className="font-medium">Design Gallery</span>
        </button>
        
        <button
          onClick={() => history.push('/design-stats')}
          className="w-full px-6 py-3 text-left text-gray-700 hover:bg-teal-50 hover:text-teal-700 transition-all duration-200 flex items-center group"
        >
          <div className="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-teal-200 transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 00-2-2z" />
            </svg>
          </div>
          <span className="font-medium">Design Statistics</span>
        </button>
        
        <button
          onClick={() => history.push('/profile-billing')}
          className="w-full px-6 py-3 text-left text-gray-700 hover:bg-yellow-50 hover:text-yellow-700 transition-all duration-200 flex items-center group"
        >
          <div className="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-yellow-200 transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <span className="font-medium">Billing</span>
        </button>

        <div className="border-t border-gray-200 mt-2 pt-2">
          <button
            onClick={handleLogout}
            className="w-full px-6 py-3 text-left text-red-600 hover:bg-red-50 hover:text-red-700 transition-all duration-200 flex items-center group"
          >
            <div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-red-200 transition-colors">
              <svg
                className="w-4 h-4 text-red-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                />
              </svg>
            </div>
            <span className="font-medium">Logout</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default UserDropdown;
